<template>
  <div v-if="showBadge" class="liteflow-shape-badge-wrapper">
    <img class="liteflow-shape-badge-svg" :src="badgeIcon" />
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue';
import { NODE_TYPE_INTERMEDIATE_END, NodeTypeEnum, ConditionTypeEnum } from '../core/constant/index.js';
import { getIconByType } from '../core/nodes/icons.js';

export default defineComponent({
  name: 'NodeBadge',
  props: {
    node: {
      // X6 Node实例不是普通Object,移除类型验证
      required: true,
    },
  },
  setup(props) {
    const model = computed(() => props.node.getData()?.model);
    
    const showBadge = computed(() => {
      if (!model.value) return false;
      
      const currentModel = model.value.proxy || model.value;
      
      // 不显示徽章的条件
      if (
        currentModel.type === props.node.shape ||
        currentModel.type === NodeTypeEnum.COMMON ||
        currentModel.type === NodeTypeEnum.BOOLEAN ||
        currentModel.type === NodeTypeEnum.VIRTUAL ||
        currentModel.type === ConditionTypeEnum.CHAIN ||
        NODE_TYPE_INTERMEDIATE_END === props.node.shape
      ) {
        return false;
      }
      
      return true;
    });
    
    const badgeIcon = computed(() => {
      if (!model.value) return null;
      const currentModel = model.value.proxy || model.value;
      return getIconByType(currentModel.type);
    });
    
    return {
      showBadge,
      badgeIcon,
    };
  },
});
</script>

<style lang="less" scoped>
.liteflow-shape-badge-wrapper {
  .liteflow-shape-badge-svg {
    position: absolute;
    top: 0;
    right: -4px;
    width: 18px;
    height: 18px;
    text-align: center;
  }
}
</style>
